﻿@{
    Layout = null;
}
@using TDF.Core.Configuration
@model Faurecia.WM.Service.Dtos.MachineDto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="~/Content/css.css" rel="stylesheet" type="text/css" />
</head>
<body style="zoom:0.39">

<div class="mainbox">
<!-- 头部 -->
<div class="header">
    <div class="header_logo"  ><img src="@Configs.Instance.GetValue("SystemLogo")"/>
    </div>
    <div class="header_number" style="font-weight: 600;">
        <h>真空吸附区域生产信息</h><br/>
        <h>Production Information Of Vacuum Lamination Area</h>
    </div>
    <div class="header_time" id="divTime"></div>
</div>
<!-- 内容BOX -->
<div class="content_box">
    <div class="produce_box">
        <div class="Produce_xis" style="font-weight: 600; color: black;">
            <div class="xis_title">
                <p>生产轴</p>
                <p>Produce Axis</p>
            </div>

            <!-- 生产中 -->
            <div class="xis_situation">
                <div class="xis_box1">
                    <div class="xis_pad">
                        <p>待生产</p>
                        <p>To Be Produced</p>
                    </div>
                    <div class="xis_round" id="production-wait">

                    </div>
                </div>
                <div class="xis_box2">
                    <div class="xis_pad">
                        <p>生产中</p>
                        <p>In Producing</p>
                    </div>
                    <div id="production-doing">
                    </div>
                </div>
                <div class="xis_box3">
                    <div class="xis_pad">
                        <p>已下线</p>
                        <p>Finished</p>
                    </div>
                    <div class="xis_round" id="production-close">
                    </div>
                </div>
            </div>
        </div>
        <div class="building_box" style="font-weight: 600;color: black;">
            <div class="building_title"> Batch Building Box</div>
            <table class="gridtable" id="gridtable">
                <tr>
                    <th style="width: 50%;" class="switch"></th>
                    <th  style="width: 50%;"class="switch"></th>
                </tr>
                <tr>
                    <td  style="width: 50%;"class="mould"></td>
                    <td style="width: 50%;" class="mould"></td>
                </tr>
                <tr>
                    <td style="padding: 0;">
                        <table class="imagetable">
                            <tr>
                                <th style="width: 25%;"></th>
                                <th style="width: 25%;"></th>
                                <th style="width: 25%;"></th>
                                <th style="width: 25%;"></th>

                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>

                        </table>
                    </td>
                    <td  style="padding: 0;">
                        <table class="imagetable">
                            <tr>
                                <th style="width: 25%;"></th>
                                <th style="width: 25%;"></th>
                                <th style="width: 25%;"></th>
                                <th style="width: 25%;"></th>

                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!-- 右边BOX -->
    <table class="configuration" id="scrap-container">
        <tr>
            <th>配置<br/>Reference</th>
            <th>库存数量<br/>Inventory Quantity</th>
            <th>当日报废数<br/>Scrap Quantity</th>
        </tr>
    </table>

</div>
</div>
    <script src="~/Scripts/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var ProductStorageTimeOut = 5000, MaxProductStorageCount = 7;
    function GetVacSorbData() {
        $.ajax({
            type: "get",
            //timeout: 50000,
            url: "/api/display/GetVacSorbData",
            data: { machineId: "@Model.Id" },
            async: true,
            success: function (result) {
                if (!result.Success) {
                    console.error(result.Message);
                } else {
                    ClearProductionPlan();
                    RenderData(result.Value);
                    console.info(result.Value);
                }
                setTimeout(function () { GetVacSorbData(); }, ProductStorageTimeOut);
            }
        });
    }

    function RenderData(data) {
        //载入待生产和生产中的产品
        for (var i = 0; i < data.ProductionPlans.length; i++) {
            var plan = data.ProductionPlans[i];
            var colorName = plan.Name;
            for (var j = 0; j < plan.PropertyInfo.length; j++) {
                if (plan.PropertyInfo[j].PName === "颜色") {
                    colorName = plan.PropertyInfo[j].Value;
                    break;
                }
            }
            var className = colorName.indexOf("米色") >= 0 ? "round" : "round_black";
            var modelHtml = BuildModelHtml(plan.ModelNames);
            if (i === 0) {
                $("#production-doing").html(' <div class="' + className + '"></div><p>' + colorName + '</p>' + modelHtml);
                continue;
            }
            $("#production-wait").append('<div class="xis_round1"><div class="' + className + '"></div><p>' + colorName + '</p>' + modelHtml + '</div>');
        }
        //载入已下线的产品
        for (var i = 0; i < data.CompleteProducts.length; i++) {
            var plan = data.CompleteProducts[i];
            var colorName = plan.Name;
            for (var j = 0; j < plan.PropertyInfo.length; j++) {
                if (plan.PropertyInfo[j].PName === "颜色") {
                    colorName = plan.PropertyInfo[j].Value;
                    break;
                }
            }
            var modelHtml = BuildModelHtml(plan.ModelNames);
            var className = colorName.indexOf("米色") >= 0 ? "round" : "round_black";
            $("#production-close").append('<div class="xis_round1" style="float: left;"><div class="' + className + '"></div><p>' + colorName + '</p>' + modelHtml + '</div>');
        }
       
        //载入BBB数据
        LoadBBBData(data.BBBInfo);
        //载入产品状态数据
        LoadScrapData(data.ProductStatues);
    }

    function BuildModelHtml(modelNames) {
        var items = [];
        for (var j = 0; j < modelNames.length; j++) {
            items.push("<p class=\"model\">" + modelNames[j] + "</p>");
        }
        return items.join("");
    }

    function LoadScrapData(scraps) {
        $("#scrap-container").html('<tr><th>配置<br/>Reference</th><th>库存数量<br/>Inventory Quantity</th><th>当日报废数<br/>Scrap Quantity</th></tr>');
        for (var i = 0; i < scraps.length; i++) {
            var name = scraps[i].Values.join("</br>");
            $("#scrap-container").append('<tr><td>' + name + '</td> <td>' + scraps[i].Count + '</td><td>' + scraps[i].ScrapCount+ '</td></tr>');
        }
    }

    function ClearProductionPlan() {
        $("#production-wait").empty();
        $("#production-doing").empty();
        $("#production-close").empty();
        $("#gridtable td").removeClass("slack");
        $("#gridtable th").text("");
        $("#gridtable td.mould").text("");
    }

    function LoadBBBData(BBBInfo) {
        if (BBBInfo.OutputType !== 2) {
            console.info("展示数据和界面不匹配");
            return;
        }
        for (var i = 0; i < BBBInfo.Sources.length; i++) {
            BindGroup(BBBInfo.Sources[i],i);
        }
    }

    function BindGroup(bbbItems, index) {
        for (var i = 0; i < bbbItems.length; i++) {
            var item = bbbItems[i];
            if (i === 0) {
                $("#gridtable td.mould:eq(" + index + ")").text(item.ColumnName);
            }
            if (item.ReleasedUpperLimit <= item.Items.length) {
                $("#gridtable th.switch:eq(" + index + ")").html("<img style=\"height:100px\" src=\"/images/warning.gif\" /><span style=\"position: relative;top: -27px;\">请换模</span>");
            }
            var cName = item.ReleasPropertyValue;
            //for (var j = 0; j < item.PropertyInfo.length; j++) {
            //    if (item.PropertyInfo[j].PName === "型号") {
            //        cName = item.PropertyInfo[j].Value;
            //        break;
            //    }
            //}
            $("#gridtable table.imagetable:eq(" + index + ") tr:eq(0) th:eq(" + i + ")").text(cName);
            for (var j = 0; j < item.Items.length; j++) {
                if (j>2) {
                    break;
                }
                $("#gridtable table.imagetable:eq(" + index + ") tr:eq(" + (3-j) + ") td:eq(" + i + ")").addClass("slack");
            }
        }
    }

    function date2str(x, y) {
        var z = {
            y: x.getFullYear(),
            M: x.getMonth() + 1,
            d: x.getDate(),
            h: x.getHours(),
            m: x.getMinutes(),
            s: x.getSeconds()
        };
        return y.replace(/(y+|M+|d+|h+|m+|s+)/g, function (v) {
            return ((v.length > 1 ? "0" : "") + eval('z.' + v.slice(-1))).slice(-(v.length > 2 ? v.length : 2))
        });
    }
    function getTime() {
        //$("#divTime").html(date2str(new Date(), "yyyy-MM-dd hh:mm:ss"));
        $.ajax({
            type: "get",
            //timeout: 50000,
            url: "/api/display/GetTime",
            success: function (result) {
                if (!result.Success) {
                    $("#divTime").html(date2str(new Date(), "yyyy-MM-dd hh:mm:ss"));
                } else {
                    $("#divTime").html(result.Value);
                }
            }
        });
        setTimeout(getTime, 1000);
    }

    $(function () {
        getTime();
        GetVacSorbData();
        setTimeout(function() {
            location.reload();
        }, 1000*60*60);
    });
</script>
</body>
</html>
